<template>
  <image style="width: 420px; height: 400px;" mode="scaleToFill"  src="../../static/hh.jpg"
    @error="imageError"></image>
  <view class="container">
    <!-- 标题 -->
    <view class="title">
      <text>获取昵称头像</text>
      <text>未选择头像则为默认头像</text>
    </view>

    <!-- 选择头像 -->
    <view class="choose-avatar-row">
      <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <image class="avatar" :src="avatarUrl"></image>
      </button>
      <text>点击选择头像</text>
    </view>

    <!-- 选择昵称 -->
    <view class="choose-nickname-row">
      <text>昵称</text>
      <input v-model="nickName" @input="inputName" type="nickname" placeholder="请输入昵称" />
    </view>

    <!-- 按钮 -->
    <view class="login-row">
      <!-- <button @click="close">关闭</button> -->
      <button @click="submit">登录</button>
    </view>
  </view>

</template>

<script>
  import {
    ref
  } from 'vue'
  import {
    useStore
  } from 'vuex'
  export default {
    name: "my-login",
    setup() {
      const store = useStore()
      // 默认头像
      let avatarUrl = ref(
        'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
      )
      let nickName = ref('')

      // 选择头像事件
      const onChooseAvatar = (e) => {
        avatarUrl.value = e.detail.avatarUrl
      }
      // 输入昵称
      const inputName = (e) => {
        // 注意一点，获取昵称在微信开发者工具中运行时是空值，但是在真机中测试是正常能获取到微信昵称的
        nickName.value = e.detail.value
      }
      // 点击登录
      const submit = () => {
        const userInfo = {
          avatarUrl: avatarUrl.value,
          nickName: nickName.value
        }
        console.log(userInfo)
        store.commit("user/updateUserInfo", userInfo)
        getToken(userInfo)
      }
      // 调用登录接口，换取永久的 token
      const getToken = async (info) => {
        // 调用微信登录接口
        const data = await uni.login().catch(err => err)
        // 判断是否 uni.login() 调用失败
        if (data.errMsg !== 'login:ok') return uni.$showError('登录失败！')
        console.log(data)
        store.commit("user/updateToken", data.code)
        // 准备参数对象
        const query = {
          // 用户登录凭证
          code: data.code,
          // 完整用户信息密文
          encryptedData: '',
          // 加密算法的初始向量
          iv: '',
          // 用户信息原始数据字符串
          rawData: '',
          // 使用 sha1 得到字符串
          signature: ''
        }
        // 换取 token
        const dataLogin = await uni.$http.post('/api/public/v1/users/wxlogin', query)
        console.log(dataLogin)
        // if (dataLogin.data.meta.status !== 200) return uni.$showMsg('登录失败！')
        uni.$showMsg('登录成功')
      }
      return {
        nickName,
        avatarUrl,
        submit,
        inputName,
        onChooseAvatar
      }
    }
  }
</script>

<style lang="scss">
  view {
    box-sizing: border-box;
  }

  .container {

    width: 100%;
    height: 45%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    .title {
      width: 100%;
      height: 30%;
      font-size: 20px;
      font-weight: bold;
      padding-top: 20px;

      text:nth-child(2) {
        display: block;
        font-size: 14px;
        font-weight: normal;
        margin-top: 5px;
      }
    }

    .choose-avatar-row,
    .choose-nickname-row {
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 10px 2px;
      font-size: 14px;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;

      .avatar-wrapper {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        margin-right: 10px;

        .avatar {
          width: 100%;
          height: 100%;
        }
      }
    }

    .choose-nickname-row {
      border-top: none;

      text {
        width: 45px;
        margin-right: 10px;
      }
    }

    .login-row {
      width: 100%;
      height: 30%;
      padding-top: 20px;
      display: flex;

      button {
        font-size: 14px;
        width: 30%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-color: transparent;
        color: #07c160;
      }

      .inactive {
        color: #ccc;
      }
    }
  }
</style>
